<template>
	<div class="flex-1 h-1">
		<div class="relative">
			<transition-group
				tag="div"
				mode="out-in"
				@enter="onEnter"
				enter-active-class="animate__animated animate__fadeIn"
				:leave-active-class="
					'animate__animated animate__fadeOut' + (showSuceessList ? 'Down' : 'Left')
				">
				<betslip-item v-for="item in listData" :key="item.id" :data="item" />
			</transition-group>
			<betslip-failed
				v-if="betslipStore.combo.status === BetslipItemStatus.failed"
				placement="bottom" />
		</div>
		<transition
			enter-active-class="animate__animated animate__fadeInDown"
			leave-active-class="animate__animated animate__fadeOutUp">
			<div v-if="betslipStore.tab === BetslipTab.Combo && comboDisabledList.length">
				<div class="relative">
					<betslip-item v-for="item in comboDisabledList" :key="item.id" :data="item" />
					<div class="absolute inset-0 border-2 border-warning rounded-md"></div>
				</div>
				<div class="flex items-center">
					<base-icon name="abnormal" size="16" color="var(--color-warning)"></base-icon>
					<div class="ml-1 text-t-2 text-sm">{{ $t('betslip.comboDisabled') }}</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { computed } from 'vue'
import BetslipItem from './betslip-item/index.vue'
import BetslipFailed from './betslip-failed.vue'
import { useBetslipStore } from '@/store'
import { BetslipTab, BetslipItemStatus } from '@/types'
import gsap from 'gsap'

defineProps({
	showSuceessList: {
		type: Boolean,
		default: false
	}
})

const betslipStore = useBetslipStore()

const listData = computed(() =>
	betslipStore.tab === BetslipTab.Combo ? betslipStore.comboList : betslipStore.list
)

const comboDisabledList = computed(() => betslipStore.comboDisabledList)

const onEnter = (el: any) => {
	const fromRect = betslipStore.fromRect
	const toRect = el.getBoundingClientRect()
	if (toRect && fromRect) {
		const elAnimated = document.createElement('div')
		elAnimated.className = `fixed z-10000 left-0 top-0 rounded-md bg-bg-3`
		document.body.appendChild(elAnimated)
		gsap.fromTo(
			elAnimated,
			{
				opacity: 0.8,
				x: fromRect.x,
				y: fromRect.y,
				width: fromRect.width,
				height: fromRect.height
			},
			{
				duration: 0.25,
				opacity: 0.8,
				x: toRect.x,
				y: toRect.y,
				width: toRect.width,
				height: toRect.height
			}
		)
		setTimeout(() => document.body.removeChild(elAnimated), 250)
	}
}
</script>

<style lang="scss" scoped>
.animate__fadeOutLeft {
	position: absolute !important;
}
</style>
